<template>
  <div id="timeManage">
    <van-nav-bar class="header"
                 fixed
                 @click-left="diffBack"
                 :border="false">
      <div class="left"
           slot="left">
        <van-icon name="arrow-left"
                  size="24px"
                  color="#fff" />
      </div>
      <div class="title"
           slot="title">管理服务时间</div>
    </van-nav-bar>
    <div class="main">
      <div class="stoptake">
        <div class="title fz4">停止接单</div>
        <van-switch v-model="isStopOrder"
                    @change="stop_start_order" />
      </div>
      <div class="timeList"
           :style="{'height':curHeight}">
        <div class="dateList"
             :style="{'height':curHeight}">
          <div class="wordstxt everydate fz4"
               v-for="(item,index) in dateList"
               :class="{'nowDate':new Date(item.preordainDate).getDate()==nowdate,'stop':isStopOrder || item.isReservation || item.todayStopOrder}"
               @click="chooseDay(new Date(item.preordainDate).getDate(),item.serviceTimeInfos,item.todayStopOrder,item.uid,index,item.isReservation,item.reservationTime)"
               :key="index">
            <span>{{new Date(item.preordainDate) | getmon}}月</span>
            <span>{{new Date(item.preordainDate) | getday}}日</span>
            <span>（{{new Date(item.preordainDate) | getweek}}）</span>
            <span v-show="item.todayStopOrder">不接单</span>
            <span v-show="item.isReservation">已约</span>
            <!-- <span>{{item | getmon}}月{{item | getday}}日</span> -->
            <!-- <span>（{{item | getweek}}）</span> -->
          </div>
        </div>
        <div class="hourList bgwrite fz4">
          <div class="dateTake"
               :class="{'choosetoday':nocheck&&!isStopOrder,'stop':isStopOrder,'noclick':isReservation}"
               @click="today_order">
            <span v-if="new Date().getDate()==nowdate">今日不接单</span>
            <span v-else>当日不接单</span>
            <van-icon v-show="nocheck&&!isStopOrder"
                      name="success"
                      color="#5E8EFE"
                      class="check" />
          </div>
          <div class="nowHour"
               :class="{'checkhour':itemh.check&&!isReservation,'checkhour1':itemh.h==reservationTime,'nocheck':nocheck || isStopOrder,'noclick':isReservation&&itemh.h!=reservationTime }"
               @click="order_time(itemh.h,index)"
               v-for="(itemh,index) in hourList">
            <div>
              <span>{{itemh.h}}</span>
              <span v-if="itemh.h==reservationTime">已约</span>
            </div>
            <van-icon v-show="itemh.check&&!nocheck&&!isReservation&&!isStopOrder"
                      name="success"
                      color="#5E8EFE"
                      class="check" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getuserUid } from "@/utils/auth";
const hourL = [
  {
    h: "09:00",
    check: false
  },
  {
    h: "10:00",
    check: false
  },
  {
    h: "11:00",
    check: false
  },
  {
    h: "12:00",
    check: false
  },
  {
    h: "13:00",
    check: false
  },
  {
    h: "14:00",
    check: false
  },
  {
    h: "15:00",
    check: false
  },
  {
    h: "16:00",
    check: false
  },
  {
    h: "17:00",
    check: false
  },
  {
    h: "18:00",
    check: false
  },
  {
    h: "19:00",
    check: false
  },
  {
    h: "20:00",
    check: false
  },
  {
    h: "21:00",
    check: false
  },
  {
    h: "22:00",
    check: false
  },
  {
    h: "23:00",
    check: false
  },
  {
    h: "24:00",
    check: false
  }
];
export default {
  data() {
    return {
      isStopOrder: false,
      isReservation: false,
      dateUid: "",
      dateList: [],
      hourList: hourL,
      nowdate: new Date().getDate(),
      nocheck: Boolean,
      fixedHeight: "106",
      serviceTimeInfos: [],
      index: 0,
      reservationTime: "",
      timeBtn: true
    };
  },
  mounted() {
    console.log(getuserUid());
    this.getOrderServiceDate(this.index);
  },
  methods: {
    diffBack() {
      this.$router.push("/performance");
    },
    //获取接单日期及时间
    async getOrderServiceDate(index) {
      const e = await HTTP("app/orderSetting/getOrderServiceDate", {
        userUid: getuserUid()
      });
      console.log(e.data);
      if (e.code == 200) {
        this.dateList = e.data.dateList;

        this.hourList.map(item => {
          for (let i of e.data.dateList[index].serviceTimeInfos) {
            if (item.h == i.preordainTime) {
              item.check = true;
            }
          }
        });
        // this.hourList = e.data.dateList[0].serviceTimeInfos; //接单时间
        this.nocheck = e.data.dateList[index].todayStopOrder; //今日是否不接单
        this.isReservation = e.data.dateList[index].isReservation;

        if (e.data.dateList[index].reservationTime) {
          console.log(e.data.dateList[index].reservationTime.length);
          this.reservationTime = e.data.dateList[index].reservationTime.substr(
            0,
            e.data.dateList[index].reservationTime.length - 3
          );
          console.log(this.reservationTime);
        }

        this.dateUid = e.data.dateList[index].uid;
        this.isStopOrder = e.data.isStopOrder;
      } else {
        this.$toast(e.msg || "服务器异常");
        return;
      }
    },
    //选择日期
    chooseDay(
      date,
      serviceTimeInfos,
      todayStopOrder,
      uid,
      index,
      isReservation,
      reservationTime
    ) {
      if (!this.isStopOrder) {
        this.hourList.map(item => {
          item.check = false; //将时间选择全部置为false
          for (let i of serviceTimeInfos) {
            if (item.h == i.preordainTime) {
              item.check = true;
            }
          }
        });
        this.index = index;
        this.nocheck = todayStopOrder;
        this.isReservation = isReservation;
        console.log(reservationTime);
        if (reservationTime) {
          this.reservationTime = reservationTime.slice(
            reservationTime.length - 8,
            reservationTime.length - 3
          );
        } else {
          this.reservationTime = "";
        }
        // console.log(this.reservationTime)
        this.dateUid = uid;
        this.nowdate = date;
      }
    },
    //停止,开始接单
    async stop_start_order() {
      const e = await HTTP("editOrderServiceDate", {
        userUid: getuserUid(),
        stopOrder: this.isStopOrder,
        updateBy: getuserUid()
      });
      if (e.code == 200) {
        this.getOrderServiceDate(this.index);
        this.$toast("设置成功！");
      } else {
        this.$toast(e.msg || "服务器异常");
      }
    },
    //当日不接单操作
    async today_order() {
      if (!this.isStopOrder && !this.isReservation) {
        this.nocheck = !this.nocheck;
        let serviceDateInfo = {};
        serviceDateInfo.uid = this.dateUid;
        serviceDateInfo.todayStopOrder = this.nocheck;
        // if(this.nocheck)
        const e = await HTTP("editOrderServiceDate", {
          userUid: getuserUid(),
          stopOrder: this.isStopOrder,
          serviceDateInfo,
          updateBy: getuserUid()
        });
        if (e.code == 200) {
          this.getOrderServiceDate(this.index);
          this.$toast("设置成功！");
        } else {
          this.$toast(e.msg || "服务器异常");
        }
      } else {
      }
    },
    //设置接单时间
    async order_time(preordainTime, index) {
      //今日可接单且没有开启停止接单和没有预约下介意选择接单时间

      if (this.timeBtn) {
        if (!this.nocheck && !this.isStopOrder && !this.isReservation) {
          this.timeBtn = false;
          this.serviceTimeInfos = [];
          this.hourList.map(item => {
            if (item.check) {
              if (item.h != preordainTime) {
                this.serviceTimeInfos.push({ preordainTime: item.h });
              } else {
                return;
              }
            } else {
              if (item.h == preordainTime) {
                this.serviceTimeInfos.push({ preordainTime });
              }
            }
          });
          if (this.serviceTimeInfos.length > 0) {
            this.hourList[index].check = !this.hourList[index].check;
            let serviceDateInfo = {};
            serviceDateInfo.uid = this.dateUid;
            serviceDateInfo.todayStopOrder = false;
            serviceDateInfo.serviceTimeInfos = this.serviceTimeInfos;

            const e = await HTTP("editOrderServiceDate", {
              userUid: getuserUid(),
              stopOrder: this.isStopOrder,
              serviceDateInfo,
              updateBy: getuserUid()
            });
            // console.log(e);
            if (e.code == 200) {
              setTimeout(() => {
                // 递归加载
                console.log(this.timeBtn);
                this.timeBtn = true;
              }, 1e3);
              this.getOrderServiceDate(this.index);
              this.$toast("设置成功！");
            } else {
              this.$toast(e.msg || "服务器异常");
            }
          } else {
            this.$toast("接单时间至少要有一个时间点！");
          }
        }
      } else {
        this.$toast("你的手速太快了！");
      }
    }
  },
  beforeMount() {
    var h = document.documentElement.clientHeight || document.body.clientHeight;
    this.curHeight = h - this.fixedHeight + "px"; //减去页面上固定高度height
  },
  filters: {
    //获取月份
    getmon(mon) {
      return mon.getMonth() + 1 < 10
        ? "0" + (mon.getMonth() + 1)
        : mon.getMonth() + 1;
    },
    //获取日期
    getday(date) {
      return date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    },
    //获取星期几
    getweek(week) {
      switch (week.getDay()) {
        case 0:
          return "周日";
          break;
        case 1:
          return "周一";
          break;
        case 2:
          return "周二";
          break;
        case 3:
          return "周三";
          break;
        case 4:
          return "周四";
          break;
        case 5:
          return "周五";
          break;
        case 6:
          return "周六";
          break;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
#timeManage {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .header {
    background: $color-primary;
    color: #ffffff;
    height: 0.92rem;
    .title {
      color: #ffffff;
    }
  }
  .main {
    position: relative;
    margin-bottom: 0.92rem;
    .stoptake {
      // position: fixed;
      // top: 0.92rem;
      margin-top: 0.92rem;
      margin-bottom: 0.1rem;
      width: calc(100% - 0.48rem);
      display: flex;
      padding: 0 0.24rem;
      justify-content: space-between;
      align-items: center;
      background-color: #ffffff;
      height: 1rem;
    }
    .timeList {
      display: flex;
      position: absolute;
      width: 100%;
      .dateList {
        position: relative;
        overflow: scroll;
        flex: 1;
        // overflow: auto;
        .everydate {
          background: #f5f5f5;
          height: 1rem;
          line-height: 1rem;
          text-align: center;
        }
        .nowDate {
          background: $color-main-background;
          color: $color-primary;
          height: 1rem;
          line-height: 1rem;
          text-align: center;
        }
        .stop {
          color: #cccccc;
        }
      }
      .hourList {
        position: relative;
        overflow: scroll;
        flex: 1;
        .dateTake {
          height: 1rem;
          line-height: 1rem;
          text-align: center;
          .check {
            position: absolute;
            top: 0.35rem;
            right: 0.24rem;
          }
        }
        .stop {
          color: #cccccc;
        }
        .choosetoday {
          color: $color-primary;
        }
        .nowHour {
          height: 1rem;
          line-height: 1rem;
          text-align: center;
          position: relative;
          .check {
            position: absolute;
            top: 0.35rem;
            right: 0.24rem;
          }
        }
        .checkhour {
          color: $color-primary;
        }
        .checkhour1 {
          color: $color-primary;
        }
        .noclick {
          color: #cccccc;
        }
        .nocheck {
          color: #cccccc;
        }
      }
    }
  }
}
</style>
